const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),
    filename: 'index.html'
});
module.exports = {
    mode: 'development', //developement production
    plugins: [
        htmlPlugin
    ],
    module: {
        rules: [
            { 
                test: /\.js|jsx$/, 
                use: 'babel-loader', 
                exclude: /node_modules/ 
            },//不能不加exclude
            /**
             * localIdentName
             * [path]目录名
             * [name]文件名
             * [local]样式名称定义名称
             * [hash] 样式hash，5或者6重复率就很小了
             * 更新前：  { test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] },
             * 更新后： { test: /\.css$/,use: ['style-loader',{ loader: 'css-loader',options: {modules: { localIdentName: '[path]'},}}] }
             */
            { 
                test: /\.css$/, 
                use: ['style-loader', 'css-loader'] 
            },//配置css样式表loader
            { 
                test: /\.ttf|woff|woff2|eot|svg$/, 
                use: 'url-loader' 
            },//打包处理文字loader
            { 
                test: /\.scss$/, 
                use: [
                    'style-loader', 
                    {
                        loader: 'css-loader',
                        options: {
                            modules: { 
                                localIdentName: '[path][name]-[local]-[hash:5]' 
                            } 
                        }
                    },
                    'sass-loader'
                ]               
            },//配置样式表?modules启用模块化注意style-css-sassloader顺序哦

        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.sass'],//表示这几个文件的后缀名不用写,默认包括.js与.json
        alias: {
            '@': path.join(__dirname, './src')//这样@表示项目根路径_ _dirname哦，不能重复
        }
    }
}